{% extends "base.html" %}
{% load i18n %}

{% block content %}
            <a href="/account/add" class="btn"><span class="icon icon-ok">&nbsp;</span>{% trans "Add" %}</a>
            
            <table class="display stylized" id="accounttable">
	         <thead>
	             <tr>
                        <th>{% trans "Account Name" %}</th>
                        <th>{% trans "Account Type" %}</th>
                        <th>{% trans "Total Amount" %}</th>
                        <th>{% trans "Create Date" %}</th>
                        <th>{% trans "Operation" %}</th>
                    </tr>
	         </thead>
	         <tbody>
	             <tr>
	                 <td colspan="5" class="dataTables_empty">{% trans "Loading data from server" %}</td>
	             </tr>
	         </tbody>
	         <tfoot>
	             <tr>
                        <th>{% trans "Account Name" %}</th>
                        <th>{% trans "Account Type" %}</th>
                        <th>{% trans "Total Amount" %}</th>
                        <th>{% trans "Create Date" %}</th>
                        <th>{% trans "Operation" %}</th>
                    </tr>
	         </tfoot>
	        </table>
	        
	        <script type="text/javascript">
         jQuery('#accounttable').dataTable( {
             "iDisplayLength": {{ pageinfo.page_size }},
		    "bProcessing": true,
		    "bServerSide": true,
		    "bPaginate": true,
		    "bLengthChange": false,
		    "bFilter": false,
		    "bSort": true,
		    "bInfo": true,
		    "bAutoWidth": false,
		    "sAjaxSource": "/get_json_data/?model_name=account"                                                        
		} );
		</script>
{% endblock %}